<template>
   <section class="Rights1">
   	  	<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
            <el-row>
           	    <el-col :span="4">
                    <el-form-item label="版本号:">
                        <el-input placeholder="请输入版本号" v-model="filter.version" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="发布时间:">
                        <el-date-picker
                                size="small"
                                v-model="releaseTime"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="状态:">
		                <el-select v-model="filter.lastStatus" size="small">
                            <el-option label="已发布" value="published"></el-option>
                            <el-option label="未发布" value="unpublish"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="submitSearch()" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
		        <el-button size="small" icon="el-icon-plus" @click="edit(0)">添加</el-button>
		        <el-button size="small" @click="submitSearch()"><i class="fa fa-refresh"></i> 刷新</el-button>
		    </el-row>
		    <el-table :data="tableData" style="width: 100%">
			    <el-table-column prop="content" label="内容" align="center" min-width="200">
			    	<template scope="scope">
				        <!--<el-popover trigger="hover" placement="top">
				           <p style="max-width:600px;word-wrap: break-word;">{{ scope.row.content }}</p>
				          <div slot="reference" class="name-wrapper">-->
				          	<span v-if="scope.row.content">
				          		{{ scope.row.content.length>=100?scope.row.content.slice(0,100)+'...':scope.row.content }}
				          	</span>          	
				          <!--</div>
				        </el-popover>-->
			        </template>
			    </el-table-column>
			    <el-table-column prop="releaseTime" label="发布时间" align="center">
			    	<template scope="scope">
                        <span>{{scope.row.releaseTime | formatUpdateTime}}</span>
                    </template>
			    </el-table-column>
			    <el-table-column prop="version" label="版本号" align="center"></el-table-column>
			    <el-table-column prop="released" label="状态" align="center">
			       <template scope="scope">
			      	    <span v-if="scope.row.released==true">已发布</span>
			      	    <span v-else>未发布</span>
			       </template>
			    </el-table-column>
			    <el-table-column label="操作" align="center">
			      <template scope="scope">
			      	<span v-if="scope.row.released==false">
			      		<el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(1,scope.row)">编辑</el-button>
			        	<el-button size="mini" type="danger" icon="el-icon-delete" @click="dele(scope.row)">删除</el-button>
			      	</span>
			        <el-button v-else @click="edit(2,scope.row)" type="primary" size="mini">查看</el-button>
			      </template>
			    </el-table-column>
			</el-table>
			<el-row >
		        <el-pagination
		          class="maT-40"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
		        </el-pagination> 
      		</el-row>
			 <!--*****************操作框************-->
	        <el-dialog :title="type == 0 ? '添加':type == 1 ? '编辑' : '查看'" :visible.sync="editDialogVisible" @close="resetForm('rulesData')">
	            <el-form :model="rulesData" :rules="rules" ref="rulesData">
	            	<el-form-item label="版本号:" :label-width="formLabelWidth" prop="version" style="position: relative;">
	                	<div class="date-cover" v-if="hideflag"></div>
                        <el-input v-model="rulesData.version" auto-complete="off" size="small" style="width: 220px;"></el-input>
	                </el-form-item>
	                <el-form-item label="发布时间:" :label-width="formLabelWidth" prop="date" style="width:70%;position: relative;">
	                	<div class="date-cover" v-if="hideflag"></div>
                        <el-date-picker
                            size="small"
                            v-model="rulesData.date"
                            type="datetime"
                             placeholder="选择日期时间"
                            :picker-options="pickerOptions">
                        </el-date-picker>
	                </el-form-item>

	                <el-form-item label="更新内容：" :label-width="formLabelWidth" prop="content" class="textArea" style="position: relative;">
	                	<div class="date-cover" v-if="hideflag"></div>
	                    <el-input
	                        type="textarea"
	                        :maxlength="500"
	                        :autosize="{ minRows: 5}"
	                        placeholder="请输入内容"
	                        v-model="rulesData.content">
	                    </el-input>
	                </el-form-item>
	            </el-form>
	            <div slot="footer" class="bottom-btn" v-if="showflag">
	            	<el-button type="primary" class="top_save" @click="saveInfo(type,'rulesData')" ><i class="fa fa-save"></i>发布</el-button>
	            </div>
	        </el-dialog>
   	  	</el-form>
   </section>
</template>

<script>
	import Vue from 'vue'
	import {mapGetters} from 'vuex'
	import {Row, Col, Form, FormItem, Button ,Select,Option,DatePicker,Table,Pagination,TableColumn,Input,Tabs,TabPane,Message,MessageBox,Dialog,Popover,Autocomplete} from 'element-ui'
	import { INFO_TOTALCOUNT, INFO_CURRENTPAGE, INFO_PAGESIZE } from '../../store/mutation-types/inform/index.js'
	import {getDate} from '../../utils/auth'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Input);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(Table);
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    Vue.use(Dialog)
    Vue.use(Popover)
    Vue.use(Autocomplete)
    
    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
    	head(){
            return {
                title: "更新通知",
                meta: [
                    { hid: '', name: '', content: ''}
                ]
            }
        },
        data() {
            return {
            	showflag:true,
            	hideflag:false,
                tabName: '更新通知',
                tableData:[],
                publishId:'',
                filter:{
	      			version:'',
	      			lastStatus:'',
	      			date:'',
	      			startTime:'', //发布时间开始
                    endTime:'',   //发布时间结束
                    pageSize: 50, // 每页条数
					pageNum: 1
      		    },
      		    releaseTime:[],//发布时间
      		    
      		    pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now()
                    }
                },
                type: 0,
                editDialogVisible: false,
                detailDialogVisible: false,
                formLabelWidth: '100px',
                rules: {
                	version: [
                        { required: true, message: '请输入版本号', trigger: 'blur' }
                    ],
//                  date: [
//                      { type: 'date', required: true, message: '请选择发布时间', trigger: 'change' }
//                  ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ]
                },
                rulesData: {
                	version:'',//版本号
                    date:[],   //发布时间
                    content: ''    //内容
                }
            }
        },
        filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true)
            }
        },
        methods: {
        	//添加公告通知
        	addAdv(){
        		this.$store.dispatch("addPublishAdv",{
        			version:this.rulesData.version,
      			    publishedTime:getDate(this.rulesData.date,true),
        			content:this.rulesData.content
        		}).then(res=>{
                    this.getSearchReleaseList()
	    		}).catch((error) => {})
        	},
        	//发布编辑公告通知
        	editAdv(data){
        		this.$store.dispatch("updatePublishAdv",{
        			id:this.publishId,
        			version:this.rulesData.version,
        			content:this.rulesData.content
        		}).then(res=>{
                    this.getSearchReleaseList()
	    		}).catch((error) => {})
        	},
        	//删除通知
        	dele(data){
        		this.$confirm('确认删除版本号为	'+data.version+'  的发布公告吗？', '提示', {
		            confirmButtonText: '确定',
		            cancelButtonText: '取消',
		            type: 'warning'
		        }).then(() => {
			        this.$store.dispatch("delPublishAdv",{
	        			id:data.id,
	        			version:data.version
	        		}).then(res=>{
	        			if(res && res.data.successed==true){
	        				this.getSearchReleaseList()
	        				this.$message({type: 'success',message: '删除成功！'});  
	        			}
		    		}).catch((error) => {})
		        }).catch(() => {
		        	this.$message({type: 'info',message: '取消删除！'});    
		        });
        		
        	},
        	//保存发布通知
        	saveInfo(type,rulesData){
        		this.$refs[rulesData].validate((valid) => {
		          	if (valid) {
		          		switch(type){
		          			case 0: this.addAdv(); break;
		          			case 1: this.editAdv(); break;
		          		}
		          		
		            	this.editDialogVisible = false;
		          	}else {
		              
		          	}
		        });
        	},
        	//查询获取发布通知列表
        	getSearchReleaseList(){
	    		if(this.releaseTime&&this.releaseTime[0]){
	    			this.filter.startTime = this.releaseTime[0]?getDate(this.releaseTime[0],true):'';
                    this.filter.endTime =  this.releaseTime[1]?getDate(this.releaseTime[1],true):'';
	    		}else{
					this.filter.startTime = ''
					this.filter.endTime = ''
				}
                this.logPreload = {
                    version:this.filter.version,
                    status:this.filter.lastStatus,
                    releaseTimeStart: this.filter.startTime?this.filter.startTime:null,
                    releaseTimeEnd: this.filter.endTime?this.filter.endTime:null,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                }
	    		this.$store.dispatch("getPublishAdvList",this.logPreload).then(res=>{
	    			if(!res) {return ;}
	    			let result=res.data;
	    			this.tableData=result.data.list
//	    			for(var i=0;i<this.tableData.length;i++){
//	    				this.tableData[i].releaseTime=1510647421000
//	    			}
	    			this.$store.commit('INFO_TOTALCOUNT',{totalCount:result.data.total})
	    			
	    		}).catch((error) => {})
    	    },
    	    handleSizeChange(val) {
    	    	this.$store.commit('INFO_PAGESIZE',{pageSize:val})
		        this.getSearchReleaseList()
		    },
		    handleCurrentChange(val) {
		    	this.$store.commit('INFO_CURRENTPAGE',{currentPage:val});
				this.getSearchReleaseList()
		    }, 
        	submitSearch(){
        		this.getSearchReleaseList();
        		this.$store.commit('INFO_STARTTIME',{startTime:this.filter.startTime});
		        this.$store.commit('INFO_ENDTIME',{endTime:this.filter.endTime});
		        this.$store.commit('INFO_VERSION',{version:this.filter.version});
		        this.$store.commit('INFO_STATUS',{Status:this.filter.lastStatus});
        	},
        	//清空
        	empty(){
        		let pageSize = this.filter.pageSize;
                let pageNum = this.filter.pageNum;
        		this.filter={
        			version:'',
	      			lastStatus:'',
	      			startTime:'', //发布时间开始
                    endTime:'',   //发布时间结束
                    pageSize:pageSize, // 每页条数
					pageNum: pageNum
        		}
        		this.releaseTime=[];
        		this.$store.commit('INFO_STARTTIME',{startTime:this.filter.startTime});
		        this.$store.commit('INFO_ENDTIME',{endTime:this.filter.endTime});
		        this.$store.commit('INFO_VERSION',{version:this.filter.version});
		        this.$store.commit('INFO_STATUS',{Status:this.filter.lastStatus});
        	},
        	resetForm(formName) {
                this.$refs[formName].resetFields();
                this.editDialogVisible = false;
           },
        	//新增、编辑、详情通知
        	edit(type,data){
        		this.editDialogVisible = true;
                this.type = type;
                switch(type){
                    case 0: //添加
                        this.showflag=true;
                        this.hideflag=false;
                        this.rulesData.date = '';
                        this.rulesData.version = '';
                        this.rulesData.content = '';
                        break;
                    case 1://编辑
                        this.showflag=true;
                        this.hideflag=false;
                        this.publishId=data.id;
                        this.rulesData.version = data.version;
                        this.rulesData.date=new Date(data.releaseTime)
                        this.rulesData.content = data.content;
                    	break;
                    case 2://查看
                        this.showflag=false;
                        this.hideflag=true;
                        this.rulesData.version = data.version;
                        this.rulesData.date=new Date(data.releaseTime)
                        this.rulesData.content = data.content;
                    	break;
                }
        	},
        },
        computed : {
            ...mapGetters({
               'pageTabsList': 'getPageTabsList',
               'currentPage': 'currentPageInfo',
               'totalCount': 'totalCountInfo',
               'pageSize': 'pageSizeInfo',
            })
        },
        mounted() {
//          if(this.filter.startTime.length){
//              this.releaseTime = [new Date(this.filter.startTime),new Date(this.filter.endTime)]
//          }
        },
        created(){
        	this.filter.startTime = this.$store.state.informs.startTime;
	        this.filter.endTime = this.$store.state.informs.endTime;
	        this.filter.version=this.$store.state.informs.version;
	        this.filter.lastStatus=this.$store.state.informs.Status;
	        if(this.filter.startTime.length){
                this.releaseTime = [new Date(this.filter.startTime),new Date(this.filter.endTime)]
            }
	        this.getSearchReleaseList()
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }
</script>

<style lang="scss">
	.Rights1{
		.date-cover{
	        position: absolute;
	        width: 100%;
	        height: 100%;
	        float: left;
	        z-index: 100;
	    }
		a, a:hover, a:focus, a:visited{
			color: #20a0ff;
	    	-webkit-text-decoration-line: underline;
	  		text-decoration-line: underline; 
		}
		.el-table{margin-top: 20px;}
		.maT-40{margin-top:40px;}
		.el-form {
			.el-form-item {
				width: 70%
			}
		}
		.el-form--inline .el-form-item__label{
			float: left;
		}
		.bottom-btn{
	        width:100%;
	        display:table;
	        text-align:center;
	    }
	    .textArea .el-form-item__error{
	    	margin-top: 12px;
	    }
	}
</style>